<template>
  <div class="setwrap set100">
    <div class="titlecommon">土壤水质</div>
    <div class="panelben">
      <div class="titlecommon2">
        <span>
          <span
            @click="changeBtn"
            :class="[btnFlag ? 'spanbtn2' : '', 'spanbtn']"
          >
            检测数据录入
          </span>
          /
          <span
            @click="changeBtn"
            :class="[!btnFlag ? 'spanbtn2' : '', 'spanbtn']"
          >
            切换到地图模式
          </span>
        </span>
      </div>

      <div v-if="btnFlag ">
        <div class="btntwo">
          <div class="btn btn2 btn31" @click="openAddMore">
            <el-icon><Plus /></el-icon>
            <span class="text"> 批量导入 </span>
          </div>
          <div class="addtime">
            <el-date-picker
              v-model="searchForm.value.chooseTime"
              type="date"
              placeholder="时间筛选"
            />
          </div>
          <div class="addtime">
            <el-select
              v-model="searchForm.value.area"
              class="m-2"
              @change="categoryChange"
              placeholder="行政区筛选"
              size="large"
            >
              <el-option
                v-for="item in areaList.value"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="addtime">
            <el-select
              v-model="searchForm.value.area"
              class="m-2"
              @change="categoryChange"
              placeholder="未录全"
              size="large"
            >
              <el-option
                v-for="item in areaList.value"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </div>
          <div class="addtime">
            <el-input v-model="searchForm.value.keyword" placeholder="请输入" />
          </div>
          <div class="btn btn2 btn223">
            <el-icon><Search /></el-icon>
            <span class="text"> 搜索 </span>
          </div>
        </div>
        <div class="infoadd">
          <div class="left">
            共计5000个样本数据,已录入4250个样本数据。共计1000户,已录全750户。
          </div>
          <div class="right">
            *黑色代表已录入检测数据,<span>蓝色</span>
            代表待录入检测数据
          </div>
        </div>

        <div class="table">
          <el-table :data="tableData.value" style="width: 100%">
            <el-table-column prop="deviceName" label="户主姓名" />
            <el-table-column prop="deviceCode" label="手机号" />
            <el-table-column prop="manufacturers" label="行政区域(镇/村/社)" />
            <el-table-column prop="lon" label="采集批次" />
            <el-table-column prop="lat" label="采集位置(经纬度)" />
            <el-table-column prop="address" label="土壤样本" />
            <el-table-column prop="plotName" label="水质样本" />
            <el-table-column prop="plotName" label="修改时间" />

            <!-- <el-table-column prop="status" label="设备状态">
              <template #default="scope">
                <div
                  class="statusdiv statusdiv1 flexcenter"
                  v-if="scope.row.deviceStatus == '在线'"
                >
                  {{ scope.row.deviceStatus }}
                </div>
                <div class="statusdiv statusdiv2 flexcenter" v-else>
                  {{ scope.row.deviceStatus }}
                </div>
              </template>
            </el-table-column> -->
            <el-table-column label="操作" v-if="userRole == 'admin-farmer'">
              <template #default="scope">
                <div class="btnwrap">
                  <div class="btntext" @click="opeEdit(scope.row)">编辑</div>

                  <div
                    class="btntext btntext2"
                    @click="openSetModal(scope.row)"
                  >
                    配置
                  </div>
                  <div class="btntext delete" @click="delOne(scope.row)">
                    删除
                  </div>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="fy">
          <div class="total flexcenter">
            共 <span>{{ pageInfo.total }}</span
            >项数据
          </div>
          <el-pagination
            :currentPage="pageInfo.pageNum"
            @current-change="currentChange"
            background
            layout="prev, pager, next"
            :total="pageInfo.total"
          />
        </div>
      </div>
      <div class="mapshow" v-else>
        <mapView ref="mapRef" />
      </div>
    </div>
    <div class="videowrap">
      
      <add-more
        v-if="(addMoreFlag = true)"
        ref="addmore"
        @refreshList="getList"
        type="setType"
      />
      <add-set
        ref="addSetRef"
        @getList="getList"
        :plotList="plotOptionList.value"
      />
    </div>
    <el-dialog
      v-model="setModalFlag"
      title="配置"
      width="50%"
      custom-class="diyclass"
    >
      <div class="addwrap">
        <div class="mcontent">
          <div class="mchild">
            <div class="label">KEY:</div>
            <div class="dydiv2">
              <el-input
                v-model="setForm.value.key"
                placeholder="请输入"
                clearable
              >
              </el-input>
            </div>
          </div>
          <div class="mchild">
            <div class="label">Secret:</div>
            <div class="dydiv2">
              <el-input
                v-model="setForm.value.secret"
                placeholder="请输入"
                clearable
              >
              </el-input>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <span class="dialog-footer">
          <el-button :disabled="pzFlag" @click="setSubmit">确认</el-button>
          <el-button type="primary" @click="setModalFlag = false">
            取消
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  
  <script lang="ts">
import bus from "@/utils/bus";
import { ElMessageBox, ElMessage } from "element-plus";
import { post, get, deletePost } from "@/public/request/api";
import {
  defineComponent,
  ref,
  reactive,
 
  onMounted,
  onUnmounted,
  computed,
} from "vue";
import { useRouter } from "vue-router";
import addMore from "../plantingType/modal/addMore.vue";
import addSet from "../plantingType/modal/addSet.vue";
import storage from "@/store";
import mapView from "@/components/mapContainer/index4.vue";
export default defineComponent({
  components: {
    addMore,
    addSet,
    mapView
  },
  setup() {
    //变量
    const userRole = storage.state.userRole;
    let btnFlag = ref(true);
    let chooseTime = ref(null);
    let pzFlag = computed({
      get() {
        if (setForm.value.key && setForm.value.secret && setForm.value.id) {
          return false;
        } else {
          return true;
        }
      },
      set(value) {},
    });
    let activeIndex = ref(9999);

    const menu = [
      {
        name: "摄像头",
        key: "cam",
      },
      {
        name: "虫情测报仪",
        key: "insect",
      },
      {
        name: "气象站",
        key: "met",
      },
      {
        name: "土壤墒情仪",
        key: "mois",
      },
      {
        name: "水肥一体机",
        key: "water",
      },
      {
        name: "长势监测仪",
        key: "grow",
      },
      {
        name: "孢子仪",
        key: "spore",
      },
    ];

    let plotOptionList = reactive({
      value: [],
    });
    let setForm = reactive({
      value: {
        key: "",
        secret: "",
        id: "",
      },
    });
    let searchForm = reactive({
      value: {
        chooseTime: "",
        area: "",
        keyword: "",
      },
    });
    let deviceTypeGet = ref("");
    let addMoreFlag = ref(false);
    const mapRef = ref();
    let pageInfo = reactive({
      total: 0,
      pageSize: 10,
      pageNum: 1,
    });
    let tableData = reactive({
      value: [],
    });
    let areaList = reactive({
      value: [
        {
          name: "xxx",
          id: 1,
        },
      ],
    });
    let setModalFlag = ref(false);
    const router = useRouter();
    function goMap() {
      bus.emit("menuChange", 0);
      router.push({ path: "/farmlandData/statistics" });
    }

    function openAddMore() {
      addMoreFlag.value = true;
      setTimeout(() => {
        this.$refs.addmore.dialogVisible = true;
      }, 150);
    }
    function changeSetType(index) {
      if (index != activeIndex.value) {
        activeIndex.value = index;
        deviceTypeGet.value = menu[index]["key"];
      } else {
        activeIndex.value = 9999;
        deviceTypeGet.value = "";
      }
      getList();
    }
    function openAdd() {
      this.$refs.addSetRef.dialogVisible = true;
      this.$refs.addSetRef.editFlag = false;
      this.$refs.addSetRef.init(false);
    }
    function getPlotOptionList() {
      get("/plot/options", {
        isExclude: 1,
      }).then((res) => {
        plotOptionList.value = res.data;
      });
    }
    function currentChange(e) {
      pageInfo.pageNum = e;
      getList();
    }
    function getList() {
      get("/device/page", {
        pageNum: pageInfo.pageNum,
        pageSize: pageInfo.pageSize,
        deviceType: deviceTypeGet.value,
      }).then((res) => {
        tableData.value = res.pageInfo.list;
        pageInfo.total = res.pageInfo.total;
      });
    }
    function delHandel(id) {
      deletePost("/device/del", {
        id,
      }).then((res) => {
        ElMessage({
          message: "删除成功",
          type: "success",
        });
        getList();
      });
    }
    function changeBtn(){
      btnFlag.value = !btnFlag.value
      if(!btnFlag.value){
        setTimeout(() => {
          mapRef.value.init();  
        }, 500);
        
      }
    }
    function openSetModal(val) {
      console.log(val);
      setForm.value.id = val.id;
      setForm.value.key = val.apikey;
      setForm.value.secret = val.apiSecret;
      setModalFlag.value = true;
    }
    function delOne(row) {
      ElMessageBox.confirm("确认删除?")
        .then(() => {
          console.log(row);
          delHandel(row.id);
        })
        .catch(() => {
          // catch error
        });
    }
    function setSubmit() {
      post("/device/config", {
        apiKey: setForm.value.key,
        apiSecret: setForm.value.secret,
        id: setForm.value.id,
      }).then((res) => {
        ElMessage({
          message: "配置成功",
          type: "success",
        });
        setModalFlag.value = false;
        getList();
      });
    }
    function mapInit() {
      getPlotOptionList();
      getList();
    }
    function opeEdit(val) {
      console.log(val);
      this.$refs.addSetRef.dialogVisible = true;
      this.$refs.addSetRef.editFlag = true;
      this.$refs.addSetRef.init(val);
    }
    // 生命周期
    onMounted(() => {
      bus.on("changeBase", mapInit);
      mapInit();
      
    });

    onUnmounted(() => {
      bus.off("changeBase");
    });

    //methods

    // return
    return {
      areaList,
      searchForm,
      userRole,
      chooseTime,
      opeEdit,
      pzFlag,
      changeSetType,
      setForm,
      setSubmit,
      mapRef,
      setModalFlag,
      openSetModal,
      delOne,
      addMoreFlag,
      currentChange,
      getList,
      plotOptionList,
      goMap,
      btnFlag,
      menu,
      activeIndex,
      tableData,
      openAddMore,
      openAdd,
      pageInfo,
      changeBtn
    };
  },
});
</script>
  
  <style lang="scss">
.set100 {
  .el-input__wrapper,
  .el-date-editor.el-input {
    height: 40px !important;
  }
  .el-input__wrapper {
    border-radius: 100px;
  }
}
.setwrap {
  .el-table th.el-table__cell,
  .el-table .el-table__cell,
  .el-table tr,
  .el-table--fit {
    background: transparent !important;
    color: #fff !important;
  }
  .el-table th.el-table__cell.is-leaf,
  .el-table td.el-table__cell {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .el-pagination.is-background .el-pager li {
    background: transparent !important;
    color: #fff !important;
  }
  .el-pagination.is-background .btn-next {
    background: none !important;
  }
  .btn-prev {
    background: none !important;
  }
}
</style>
  <style lang="scss" scoped>
@import "@/assets/scss/index.scss";
.mapshow{
  position: relative;
  width: 100%;
  margin-top: 20px;
  height: 700px;
}
.btn223 {
  margin-left: 30px;
}
.spanbtn {
  cursor: pointer;
  color: gray;
}
.addtime {
  margin-left: 20px;
  margin-top: 20px;
}
.btn31 {
  width: 100px !important;
}
.infoadd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  span {
    color: rgb(9, 127, 229);
  }
}
.spanbtn2 {
  color: #fff !important;
}
.setwrap {
  .statusdiv {
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 10px;
    width: 40px;
    box-sizing: border-box;
  }
  .statusdiv1 {
    color: rgba(8, 204, 126, 1);
    background-color: rgba(8, 204, 126, 0.18);
  }
  .statusdiv2 {
    color: #666;
    background-color: #ccc;
  }
  .btntext2 {
    margin-left: 10px;
  }
  .tabwrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    .search {
      display: flex;
      background: rgba(255, 255, 255, 0.08);
      border-radius: 100px;
      .sbtn {
        background: rgba(9, 127, 229, 1);
        border-radius: 100px;
        padding: 3px 15px;
        cursor: pointer;
        .icon {
          position: relative;
          top: 2px;
        }
      }
      .input {
        background: transparent;
        outline: none;
        padding-left: 10px;
        border-radius: 0;
        border: none;
        color: #fff;
      }
    }
  }
  .btn3 {
    width: 100px !important;
    margin-left: 10px;
  }

  .fy {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .total {
      color: rgba(255, 255, 255, 0.6);
      font-size: 10px;
      span {
        font-size: 20px;
      }
    }
  }
  .table {
    margin-top: 20px;
  }
  .btnwrap {
    display: flex;
    align-items: center;
    .btntext {
      color: rgba(49, 127, 245, 1);
      cursor: pointer;
    }
    .delete {
      color: rgba(245, 98, 98, 1) !important;
      margin-left: 15px;
    }
  }
  .titlecommon2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .btn2 {
    width: 70px;
    box-sizing: border-box;
    padding: 5px 10px !important;
    margin-top: 20px;
  }
  .btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(9, 127, 229, 1);
    font-size: 14px;
    padding: 5px 20px;
    border-radius: 5px;
    cursor: pointer;
    span.text2 {
      margin-left: 10px;
    }
  }
  .tab {
    display: flex;
    align-items: center;

    .tabchildActive {
      color: rgba(49, 154, 245, 1) !important;
      background: rgba(49, 154, 245, 0.16) !important;
    }
    .tabchild {
      cursor: pointer;
      padding: 4px 13px;
      border-radius: 100px;
      color: rgba(255, 255, 255, 0.6);
      background: rgba(255, 255, 255, 0.08);
      margin-right: 20px;
    }
  }
}
</style>
  